<script lang="ts">
import { ElButton } from "@/components";
import ElInput from "@/components/input";
import ElOverlay from "@/components/overlay";
import { TrapFocus } from "@/directives";
import { useLocaleInject } from "@/hooks";
import PopupManager from "@/utils/popup-manager";
import { ComponentSize, Indexable } from "@/utils/types";
import { isValidComponentSize } from "@/utils/validators";
import { computed, defineComponent, PropType, reactive, ref } from "vue";
import type {
  Action,
  MessageBoxState,
  MessageBoxType,
} from './message-box.type'
const TypeMap: Indexable<string> = {
  success: "success",
  info: "info",
  warning: "warning",
  error: "error",
};

export default defineComponent({
  name: "ElMessageBox",
  directives: {
    TrapFocus,
  },
  components: {
    ElButton,
    ElInput,
    ElOverlay,
  },
  inheritAttrs: false,
  props: {
    buttonSize: {
      type: String as PropType<ComponentSize>,
      validator: isValidComponentSize,
    },
    modal: {
      type: Boolean,
      default: true,
    },
    lockScroll: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },
    closeOnHashChange: {
      type: Boolean,
      default: true,
    },
    center: Boolean,
    roundButton: {
      default: false,
      type: Boolean,
    },
    container: {
      type: String, // default append to body
      default: 'body',
    },
    boxType: {
      type: String as PropType<MessageBoxType>,
      default: '',
    },
  },
  emit:['vanish','action'],
  setup(props,{emit}) {
    const {t} = useLocaleInject()
    const visible = ref(false)
    const state = reactive<MessageBoxState>({
           beforeClose: null,
      callback: null,
      cancelButtonText: '',
      cancelButtonClass: '',
      confirmButtonText: '',
      confirmButtonClass: '',
      customClass: '',
      customStyle: {},
      dangerouslyUseHTMLString: false,
      distinguishCancelAndClose: false,
      iconClass: '',
      inputPattern: null,
      inputPlaceholder: '',
      inputType: 'text',
      inputValue: null,
      inputValidator: null,
      inputErrorMessage: '',
      message: null,
      modalFade: true,
      modalClass: '',
      showCancelButton: false,
      showConfirmButton: true,
      type: '',
      title: undefined,
      showInput: false,
      action: '' as Action,
      confirmButtonLoading: false,
      cancelButtonLoading: false,
      confirmButtonDisabled: false,
      editorErrorMessage: '',
      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed
      // seemed ok for now without this state.
      // isOnComposition: false, // temporary remove
      validateError: false,
      zIndex: PopupManager.nextZIndex(),
    })
    const icon = computed(
      ()=>state.iconClass || (state.type && TypeMap[state.type] ? `el-icon`)
    )
  },
});
</script>
